<template>
  <!-- 首页 -->
  <div class="homePage">
    <!-- 首页分析 -->
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card class="cardBox A">
          <div class="card_b">
            <div class="t_left">
              <p>赛事活动总数</p>
              <p class="num">{{numAnalysis.allNum}}</p>
            </div>
            <div class="t_right">
              <p>赛事总数：{{numAnalysis.matchNum}}</p>
              <p>活动总数：{{numAnalysis.actNum}}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="cardBox B">
          <div class="card_b">
            <div class="t_left">
              <p>总报名人数</p>
              <p class="num">{{numAnalysis.allApply}}</p>
            </div>
            <div class="t_right">
              <p>赛事报名：{{numAnalysis.matchApplyInfs}}</p>
              <p>活动报名：{{numAnalysis.actApplyInfs}}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="cardBox C">
          <div class="card_b">
            <div class="t_left">
              <p>赛事活动总收入</p>
              <p class="num">{{numAnalysis.allPrice}}</p>
            </div>
            <div class="t_right">
              <p>赛事收入：{{numAnalysis.matchSumPrice}}</p>
              <p>活动收入：{{numAnalysis.actSumPrice}}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="detail">
      <div class="left-card">
        <el-card class="box-card">
          <div class="smTit">总访问量</div>
          <div class="num_d">
            {{readCount}}
            <span class="tip">次</span>
          </div>
        </el-card>
        <el-card class="box-card">
          <div class="smTit">进行中的赛事/活动</div>
          <div class="num_d">
            {{underway}}
            <span class="tip">场</span>
          </div>
        </el-card>
        <el-card class="box-card">
          <div class="smTit">即将开始赛事/活动</div>
          <div class="num_d">
            {{willStart}}
            <span class="tip">场</span>
          </div>
        </el-card>
      </div>
      <div class="right-card">
        <el-card class="box-card-ech">
          <div class="smTit">报名人数统计(人)</div>
          <div class="ech-wrap" ref="myChartsA"></div>
        </el-card>
        <el-card class="box-card-ech">
          <div class="smTit">赛事收入统计(元)</div>
          <div class="ech-wrap" ref="myChartsB"></div>
        </el-card>
      </div>
    </el-row>
  </div>
</template>


<script>
import echarts from "echarts";
import bigNumber from "../../../assets/bigNumber"
export default {
  data() {
    return {
      numAnalysis: {
        actApplyInfs: 0,
        actNum: 0,
        actSumPrice: 0,
        matchApplyInfs: 0,
        matchNum: 0,
        matchSumPrice: 0,
        allNum: 0,
        allApply: 0,
        allPrice: 0,
      },
      readCount: 0,
      willStart: 0,
      underway: 0,
      chartAData: [],
      chartBData: [],
    };
  },
  methods: {
    getInit() {
      this.$axios
        .get("/sbr/match/getAnalysis/" + this.$Base64.encode(this.$orgId))
        .then((res) => {
          let rr = res.data.data;
          rr.numAnalysis.allPrice =
            new bigNumber(rr.numAnalysis.matchSumPrice).plus(rr.numAnalysis.actSumPrice)
          rr.numAnalysis.allNum =
            rr.numAnalysis.matchNum + rr.numAnalysis.actNum;
          rr.numAnalysis.allApply =
            rr.numAnalysis.matchApplyInfs + rr.numAnalysis.actApplyInfs;
          if (rr.numAnalysis.allPrice > 10000)
            rr.numAnalysis.allPrice = rr.numAnalysis.allPrice / 10000 + "万";
          if (rr.numAnalysis.allNum > 10000)
            rr.numAnalysis.allNum = rr.numAnalysis.allNum / 10000 + "万";
          if (rr.numAnalysis.allApply > 10000)
            rr.numAnalysis.allApply = rr.numAnalysis.allApply / 10000 + "万";
          if (rr.numAnalysis.matchSumPrice > 10000)
            rr.numAnalysis.matchSumPrice =
              rr.numAnalysis.matchSumPrice / 10000 + "万";
          if (rr.numAnalysis.actSumPrice > 10000)
            rr.numAnalysis.actSumPrice =
              rr.numAnalysis.actSumPrice / 10000 + "万";
          this.numAnalysis = rr.numAnalysis;
          this.readCount = rr.readCount;
          this.underway = rr.underway;
          this.willStart = rr.willStart;
          this.chartAData = rr.applyInfolist;
          this.chartBData = rr.orderList;
          this.chartsA();
          this.chartsB();
        });
    },
    // 报名人数统计
    chartsA() {
      let myCharts = echarts.init(this.$refs.myChartsA);
      let x = this.chartAData.map((v) => {
        return v.date.substring(5, 10);
      });
      let y = this.chartAData.map((v) => {
        return v.num;
      });
      var option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: x,
        },
        yAxis: {
          type: "value",
          //  interval: 1, //间隔
          minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
        },
        grid: {
          x: 50,
          y: 20,
          x2: 20,
          y2: 30, //距离下边的距离
        },
        series: [
          {
            data: y,
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#d6e3fe",
            },
            lineStyle: {
              color: "#5865FF",
            },
            areaStyle: {},
          },
        ],
      };
      myCharts.setOption(option);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
    // 赛事收入统计
    chartsB() {
      let myCharts = echarts.init(this.$refs.myChartsB);
      let x = this.chartBData.map((v) => {
        return v.date.substring(5, 10);
      });
      let y = this.chartBData.map((v) => {
        return v.price;
      });
      var option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          // axisTick: {
          //   //x轴刻度线
          //   show: false,
          // },
          boundaryGap: false,
          data: x,
        },
        yAxis: {
          type: "value",
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
        },
        grid: {
          x: 50,
          y: 20,
          x2: 20,
          y2: 30, //距离下边的距离
        },
        series: [
          {
            data: y,
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#d6e3fe",
            },
            lineStyle: {
              color: "#5865FF",
            },
            areaStyle: {},
          },
        ],
      };
      myCharts.setOption(option);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
  },
  created() {
    this.getInit();
  },
};
</script>
<style scoped>
.homePage {
  width: calc(100% - 30px);
  padding: 15px;
}
.cardBox {
  color: #fff;
  overflow: hidden;
}
.A {
  background-color: #5b8ff9;
}
.B {
  background-color: #19db89;
}
.C {
  background-color: #ffad0e;
}
.num {
  font-size: 32px;
}
.card_b {
  height: 70px;
}
.t_left {
  width: 60%;
  display: inline-block;
  overflow: hidden;
}
.t_right {
  width: 40%;
  display: inline-block;
  overflow: hidden;
  line-height: 35px;
}

.detail {
  margin-top: 18px;
}
.left-card {
  width: 370px;
  float: left;
}
.box-card {
  width: 370px;
  margin-bottom: 15px;
  float: left;
}
.pp {
  overflow: hidden;
}
.pA,
.pB {
  float: left;
  width: 50%;
  text-align: center;
  overflow: hidden;
}
.right-card {
  width: calc(100% - 385px);
  float: right;
}
.box-card-ech {
  width: 100%;
  float: right;
  margin-bottom: 15px;
}
.num_d {
  font-size: 80px;
  text-align: center;
  margin-top: 15px;
}
.tip {
  font-size: 15px;
}

.ech-wrap {
  width: 100%;
  height: 210px;
  margin-top: 10px;
}
</style>